<template>
  <div class="record-page">
    <table-search
      :queryFormItem="queryFormItem"
      :collapseFormItem="collapseFormItem"
      :data="filter"
      @handleSearch="handleSearch"
      @handleReset="handleReset"
    ></table-search>
    <starLine
      :config="lineConfig"
      :language="lineLanguage"
      :data="chartData"
    ></starLine>
    <starLine
      :config="barConfig"
      :language="lineLanguage"
      :data="chartData"
    ></starLine>
  </div>
</template>
<script>
import tableExpand from "@/pages/components/tableExpand.vue";
import TableSearch from "public/components/table/parts/table-search";
import { typeClassName } from "@/pages/config/classNameMap";
export default {
  components: { TableSearch },
  name: "recordChart",
  props: {
    ids: {
      default: () => {
        return [];
      },
    },
    currentNode: {
      default: () => {
        return {
          id: "root",
          title: "未选中",
        };
      },
    },
  },
  data() {
    return {
      loading: false,
      rules: {},
      cols: 2,
      filter: {span:'0'},
      spanOptions: [
        { label: "日", value: "0" },
        { label: "周", value: "1" },
        { label: "月", value: "2" },
      ],
      lineConfig: {
        type: "line",
        toolbox: false,
        xAxisNameLocation: "end",
        boundaryGap: true,
        yAxisNameLocation: "end",
        legend: true,
        smooth: true,
        stack: "",
      },
      barConfig: {
        type: "bar",
        toolbox: false,
        xAxisNameLocation: "end",
        boundaryGap: true,
        yAxisNameLocation: "end",
        legend: true,
        smooth: true,
        stack: "",
        //bar
        showBackground: true,
      },
      lineLanguage: {
        "en-US": {
          title: "",
          xAxisTitle: "",
          yAxisTitle: "value",
        },
        "zh-CN": {
          title: "",
          xAxisTitle: "",
          yAxisTitle: "数值",
        },
      },
      chartData: {},
    };
  },
  computed: {
    queryFormItem() {
      return [
        {
          key: "timeRange",
          title: {
            "zh-CN": "时间区间",
            "en-US": "timeRange",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "datetimeRange" },
        },
        {
          key: "span",
          title: {
            "zh-CN": "跨度",
            "en-US": "span",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.spanOptions },
        },
      ];
    },
    collapseFormItem() {
      return [
        {
          key: "timeRange",
          title: {
            "zh-CN": "时间区间",
            "en-US": "timeRange",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "datetimeRange" },
        },
        {
          key: "span",
          title: {
            "zh-CN": "跨度",
            "en-US": "span",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.spanOptions },
        },
      ];
    },
    lang() {
      return {
        "en-US": {
          cancel: "cancel",
          confirmDelete: "confirm delete?",
          status: "status",
          remark: "remark",
        },
        "zh-CN": {
          cancel: "取消",
          confirmDelete: "确认删除？",
          status: "状态",
          remark: "备注",
        },
      }[this.G_Locale];
    },
    data() {
      if (!!this.collectionObject) {
        return this.collectionObject.records.map((d) => {
          return {
            ...d,
            ...d.values,
          };
        });
      } else {
        return [];
      }
    },
  },
  created() {

  },
  mounted() {},
  methods: {
    handleSearch() {
      if(!this.currentNode.id||this.currentNode.id==='root'){
        this.$Message.error('请选择节点');
        return;
      }
      let params = {...this.filter,id:this.currentNode.id}
      this.$api.Custom.consumeCount(params).then(res => {
          this.$set(this,'chartData',res)
      })
    },
    handleReset() {
      this.filter = {span:'0'};
    },
  },
};
</script>
<style scoped lang="scss">
.record-page{
  padding-top: 10px;
}
</style>
